<script setup lang="ts">
import {
  reqPosiAdd,
  reqPosiEdit,
  reqPersonList,
  reqPosiList,
  reqPosiDelete,
} from "@/api/Position/Position"
import type {
  JobItems,
  JobListParams,
  JobResponse,
} from "@/api/types/Position"
import { RoleOptionResponse, RoleOptions } from "@/api/types/user";
import { onMounted, reactive, ref } from "vue"
// 搜索内容
const searchValue = ref("")
// 当前页
const current = ref(1)
// 搜索长度
const limit = ref(5)
// 列表总长度
const total = ref(0)
// 列表数据
const PositionList = ref<JobItems[]>([])
// 对话框显示与隐藏
const dialogVisible = ref(false)
// 对话框表单数据
const dialogFormData = reactive({
  _id: "",
  name: "",
  desc: "",
})
// 职位人
const selectedPerson = ref<string>("")
// 表单实例
const dialogFormRef = ref()
// 表单验证
const dialogFormRules = {
  name: [{ required: true, message: "职位名称必填", trigger: "blur" }],
  desc: [{ required: true, message: "职位描述必填", trigger: "blur" }],
}
// 控制器
const isWho = ref(1)
// 职位人列表
const JobPersonList = ref<RoleOptions[]>([])
// 获取职位列表
const jobList = async (pages = 1) => {
  current.value = pages
  const params: JobListParams = {
    current: current.value,
    limit: limit.value,
    name: searchValue.value,
  }
  const result = await reqPosiList(params)
  PositionList.value = result.data.result
  current.value = +result.data.current
  limit.value = +result.data.limit
  total.value = +result.data.total
}
// 搜索
const serchJob = () => {
  jobList()
}
// 重置
const reset = () => {
  searchValue.value = ""
  jobList()
}
// 切换当当前页
const handleCurrentChange = () => {
  jobList(current.value)
}
// 对话框关闭事件回掉
const handleClose = () => {
  dialogClose()
}
// 对话框关闭
const dialogClose = async () => {
  // dialogFormData
  await dialogFormRef.value.clearValidate(["name", "desc"])
  dialogVisible.value = false
  Object.assign(dialogFormData, {
    _id: "",
    name: "",
    desc: "",
  })
  selectedPerson.value = ""
  jobList(current.value)
}

// 获取职位人列表
const getPersonList = async () => {
  const result: RoleOptionResponse = await reqPersonList()
  JobPersonList.value = result.data.roleList
}

// 新增职位
const addJob = () => {
  isWho.value = 1
  dialogVisible.value = true
  getPersonList()
}
// 编辑职位
const editJob = (row: JobItems) => {
  isWho.value = 2
  dialogVisible.value = true
  Object.assign(dialogFormData, row)
  selectedPerson.value = row.person
  getPersonList()
}
// 删除职位
const deleteJob = async (_id: string) => {
  const result: JobResponse = await reqPosiDelete(_id)
  if (result.code == 201) {
    ElMessage.success(result.msg)
    jobList(current.value)
    return
  }
  ElMessage.error(result.msg)
}
// 提交
const save = async () => {
  if (isWho.value == 1) {
    const params = {
      name: dialogFormData.name,
      desc: dialogFormData.desc,
      person: selectedPerson.value,
    }
    await dialogFormRef.value.validate()
    const result: JobResponse = await reqPosiAdd(params)
    if (result.code == 201) {
      ElMessage.success(result.msg)
      dialogClose()
      return
    }
    ElMessage.error(result.msg)
  }
  if (isWho.value == 2) {
    await dialogFormRef.value.validate()
    const params = {
      _id: dialogFormData._id,
      name: dialogFormData.name,
      desc: dialogFormData.desc,
      person: selectedPerson.value,
    }
    const result: JobResponse = await reqPosiEdit(params)
    if (result.code == 201) {
      ElMessage.success(result.msg)
      dialogClose()
      return
    }
    ElMessage.error(result.msg)
  }
}

onMounted(() => {
  jobList()
})
</script>

<template>
  <div class="Position">
    <el-card>
      <el-row>
        <el-col :span="8" v-has="`Position.btn.query`">
          <el-input v-model="searchValue" placeholder="请输入职位"></el-input>
          <el-button
            type="primary"
            :disabled="searchValue.length > 1 ? false : true"
            @click="serchJob"
            >搜索</el-button
          >
          <el-button
            :disabled="searchValue.length > 1 ? false : true"
            type="info"
            @click="reset"
            >重置</el-button
          >
        </el-col>
        <el-col :span="3">
          <el-button v-has="`Position.btn.add`" type="primary" @click="addJob">新增职位</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <el-table border :data="PositionList">
        <el-table-column label="#" type="index" align="center" width="50" />
        <el-table-column label="职位名称" align="center" prop="name" />
        <el-table-column label="职位描述" align="center" prop="desc" />
        <el-table-column label="职位人" align="center" prop="person" />
        <el-table-column label="创建时间" align="center" prop="createTime" />
        <el-table-column label="更新时间" align="center" prop="updateTime" />
        <el-table-column label="操作" width="130">
          <template #="{ row }">
            <el-button
              v-has="`Position.btn.edit`"
              type="primary"
              @click="editJob(row)"
              size="small"
              icon="Edit"
            ></el-button>
            <el-popconfirm
              title="确认要删除该职位?"
              @confirm="deleteJob(row._id)"
            >
              <template #reference>
                <el-button v-has="`Position.btn.delete`" type="danger" size="small" icon="Delete"></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="current"
        v-model:page-size="limit"
        :page-sizes="[5, 10, 15, 20]"
        :background="true"
        layout="prev, pager, next, jumper,->,total, sizes,"
        :total="total"
        @size-change="handleCurrentChange"
        @current-change="jobList"
      />
    </el-card>
    <!-- 对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="isWho == 1 ? '新增职位' : '编辑职位'"
      width="500"
      :before-close="handleClose"
    >
      <template #default>
        <el-form
          ref="dialogFormRef"
          :rules="dialogFormRules"
          label-width="100"
          :model="dialogFormData"
        >
          <el-form-item label="职位名称" prop="name">
            <el-input v-model="dialogFormData.name"></el-input>
          </el-form-item>
          <el-form-item label="职位描述" prop="desc">
            <el-input v-model="dialogFormData.desc"></el-input>
          </el-form-item>
          <el-form-item label="职位人">
            <el-select v-model="selectedPerson">
              <el-option
                v-for="item in JobPersonList"
                :key="item._id"
                :label="item.roleName"
                :value="item.roleName"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogClose">取消</el-button>
          <el-button type="primary" @click="save"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.Position {
  .el-card {
    .el-input {
      width: 140px;
      margin-right: 20px;
    }
    margin-bottom: 20px;
    .el-pagination {
      margin-top: 20px;
    }
  }
}
</style>
